<template>
  <div v-html="icon" class="svg-icon-container"></div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import icons from "./icons"
const props = defineProps({
    name: {
        type: String,
        default: ''
    },
});
const icon = computed(() => icons[props.name] || `ITEM NOT FOUND FOR ICON "${props.name}"`);
</script>

<style>
.svg-icon-container .icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
